<template>
  <div :class="['block-content']">
    <div class="chat-tabs">
      <div
          @click="activeValue = item.id"
          :class="['chat-tab-item', activeValue === item.id ? 'active' : '']" v-for="item in tabList" :key="item.id">
        {{ item.name}}
      </div>
    </div>
    <div class="chat-content">
      <component :is="activeValue"></component>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import Chat from './ChatManager/Chat.vue';
import Upload from './ChatManager/Upload.vue';
import Friend from './ChatManager/Friend.vue';
import Number from './ChatManager/Number.vue';

const theme = ref('dark');
const activeValue = ref(Friend);
const tabList = ref([
  {
    id: Chat,
    name: '会话管理'
  },
  {
    id: Upload,
    name: '上传文件'
  },
  {
    id: Friend,
    name: '好友列表'
  },
  {
    id: Number,
    name: '数字人'
  }
]);

const toggleTheme = () => {
  theme.value = theme.value === 'dark' ? 'light' : 'dark';
};
</script>
<style lang="scss">
.dark.block-content {
  background: #24272E;
}
.chat-content {
  flex-grow: 1;
  overflow: hidden;
}
.block-content {
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 9px;
}
.chat-tabs {
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 28px;
  background: #1A1D22;
  border-radius: 4px;
  flex-shrink: 0;
  .chat-tab-item {
    flex: 1;
    text-align: center;
    line-height: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    border-radius: 4px;
  }
}
.dark {
  .block-content {
    background: #24272E;
    .ellipsis {
      // 当行溢出省略号
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  .chat-tab-item {
    color: rgba(255,255,255,0.42);
    &.active {
      color: #fff;
      background: #63E2B7;
    }
  }
}
.light {
  .block-content {
  }
}
</style>
